<template>
  <div>
    <el-form :model="form" :ref="`${refName}_form`"  :rules="rule">
      <el-form-item prop="phone">
        <!-- <el-input v-model="form.phone" clearable placeholder="请输入手机号"  style="width: 100%" class="input" /> -->
        <input
          style="width: 100%"
          placeholder="请输入手机号"
          class="input"
          clearable
          v-model="form.phone"
        /> 
      </el-form-item>
      <el-form-item prop="vCode">
        <div flex="main:justify" style="display: flex; justify-content: space-between; width: 100%; " >
          <!-- <el-input  v-model="form.vCode" clearable placeholder="请输入验证码"  style="width: 65%" class="input" /> -->
          <input
            class="input"
            placeholder="验证码"
            clearable
            style="width: 65%"
            v-model="form.vCode"
          />
          <sendCode class="code" :phone="form.phone"></sendCode>
        </div>
      </el-form-item>
    </el-form>
  </div>
</template>

<script lang="ts">
import sendCode from "/@/components/login/sendCode.vue";

import { useLoginStore } from '/@/store';
const loginStore = useLoginStore();

import router from "/@/router";

export default {
  props: {
    refName: String,
    loginType: {
      type: String,
      default: 'login'  //checkPhone
    },
  },
  components: {
    sendCode,
  },
  
  data() {
    return {
      form: {
        phone: "",
        vCode: "",
      },
      rule: {
        phone: [{ required: true, message: "请输入手机号码" }],
        vCode: [{ required: true, message: "请输入验证码" }],
      },
    };
  },
  methods: {
   submit () {
     return new Promise((resolve, reject) => {
      let ref = `${this.refName}_form`;
    
      this.$refs[ref].validate( async(valid) => {
        if (valid) {
          if(this.loginType ==='checkPhone'){
            try {
              //const res = await this.$store.dispatch('user/checkPhone',this.form)
              resolve(res)
            } catch (error) {
              reject(error)
            }
          } else {
            //console.log(router);
            //router.push('/homepage');
            try {
              loginStore.loginByCode(this.form).then((res) =>{
                //console.log(res);
                router.push('/homepage');
                // console.log(res);
                // resolve(res);
                // console.log('resssss');
                // console.log(res);
                // router.push('/homepage');
              });
            } catch (error) {
              reject(error)
            }
          }
        } else {
          // reject()
          return false;
        }
      });
     })
      
    },
  },
};
</script>

<style lang="scss" scoped>
.code {
  height: 40px;
  border-radius: 20px;
  width: 30%;
  border: 1px solid #ff5f19;
  color: #ff5f19;
  font-size: 16px;
}

// .input:focus {
//   border: 1px solid;
//   border-color: var(--el-color-primary);
// }

.input {
  height: 40px;
  line-height: 40px;
  display: block;
  border-radius: 20px;
  border: 1px solid #e6e6e6;
  color: #808080;
  padding: 0 20px;
  outline: none;  // 处理 :focus 大黑边的问题
}
.input::placeholder,
.input {
  font-size: 16px;
}

</style>